<template>
<div> 
    <headerSearch title="圈子企业" :searchBack="true" @done="gotobtn"></headerSearch>
      <!-- 搜索框 -->
    <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
    <div class="suspension_content" style="background-color: #fff;">
      <!-- 地区、行业、协会下拉框 -->
      <!-- <div class="level_linkage">
          <select v-model="UnitSelected">
              <option v-for="item in UnitList" :value="item.id" :key="item">{{item.name}}</option>
          </select>
          
          <select v-model="DepartmentSelected">
              <option v-for="item in DepartmentList" :value="item.id" :key="item">{{item.name}}</option>
          </select>
          
          <select v-model="UserSelected">
              <option v-for="item in UserList" :value="item.id" :key="item">{{item.name}}</option>
          </select>
      </div> -->
      <!-- 地区、行业、协会下拉框 -->
      <!-- <div class="three_level_linkage">
        <div class="level_one" @click="levelOneclick">
          <div class="level_area">
            {{area_name || '地区'}}
          </div>
          <div class="trangle"></div>
        </div>
        <div class="level_one" @click="levelTwoclick">
          <div class="level_area">
            {{industry || '行业'}}
          </div>
          <div class="trangle"></div>
        </div>
        <div class="level_one" @click="levelThreeclick">
          <div class="level_area">
            {{association || '协会'}}
          </div>
          <div class="trangle"></div>
        </div>
      </div> -->
      <!-- 头部浮层 -->
      <div class="main-suspension" style="background-color: #fff;"> 
        <div class="suspension-top"></div>
        <div class="suspension-info main_hot" style="box-shadow: 0px 8px 16px rgba(221, 221, 221, 0.349019607843137);">
          <!-- 卡片头部-上 -->
          <div class="suspension-info-top hot_top">
            <div class="title_text_more">
              <h3>热门企业</h3>
              <!-- <a href="javascript:void(0)">更多<i class="iconfont icon-xiangyou"></i></a> -->
            </div>
          </div>
          <!-- 卡片头部-下 -->
          <!-- 大方形头像 -->
          <div class="big_square">
            <div v-if="hot == ''" class="failedLoadEmpty">
                <img src="../common/images/Disappointment.png" alt="">
                <span>暂无查询结果</span>
            </div>
            <ul class="soc" v-else>
              <li v-for="list in hot.slice(0, 4)" @click="JumpCompanyInfo(list.id)" :key="list.id">
                  <span class="circle_hot_company_img">
                    <img :src="list.log_img" v-if="list.log_img != null">
                    <img src="../common/images/youquan.png" v-else/>
                  </span>
                  <span v-if="list.name">{{list.name}}</span>
                  <span v-else>暂无填写企业名称</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 所有企业 -->
      <div class="all_main_list">
          <div class="title_text_more">
            <h3>圈子企业</h3>
          </div>
          <div class="association_lists" v-for="(list, ind) in CompanyList" :key="ind">
              <div class="association_left_img" @click="JumpCompanyInfo(list.id)">
             		<img :src="list.log_img" v-if="list.log_img != null">
		            <img src="../common/images/youquan.png" v-else/>
              </div>
              <div class="association_desc" @click="JumpCompanyInfo(list.id)">
                  <h5 v-if="list.name">{{list.name}}</h5>
                  <h5 v-else>暂无填写企业名称</h5>
                  <p v-if="list.admin_name">{{list.admin_name}}</p>
                  <p v-else>暂无简介</p>
              </div>
              <div class="btn_small_red" @click="JumpcompanyInfomation(list)">
                <button v-if="list.showStatus == 0">加入</button>
                <button v-if="list.showStatus == 1">查看</button>
                <button v-if="list.showStatus == 2">沟通</button>
              </div>          
          </div>
          <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading" style="margin-top: 0.6rem;">
              <span slot="no-more" class="contentEmpty">
                <template v-if="CompanyList.length">
                    (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                </template>
                <template v-if="!CompanyList.length">
                  <img src="../common/images/failedLoad.png" alt="">
                  <em>暂无查询结果</em>
                </template>
              </span>
              <span slot="no-results" class="contentEmpty">
                  <template v-if="CompanyList.length">
                      (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                  </template>
                  <template v-if="!CompanyList.length">
                      <img src="../common/images/failedLoad.png" alt="">
                      <em>暂无查询结果</em>
                  </template>
              </span>
          </infinite-loading>
      </div>
    </div>

    <!-- 选择地区 -->
      <!-- <mt-popup v-model="popupVisible" position="bottom">
        <ul> 
            <li v-for="(list, listind) in UcircleList" :key="listind" @click="JoinAreaName(list.name,listind)">{{list.name}}</li>
        </ul>
      </mt-popup> -->
    <!-- 选择行业 -->
      <!-- <mt-popup v-model="industrypopupVisible" position="bottom">
        <ul> 
            <li v-for="(list, industryind) in UindustryList" :key="industryind" @click="JoinIndustryName(list.industryName,industryind)">{{list.industryName}}</li>
        </ul>
      </mt-popup> -->
    <!-- 选择协会 -->
      <!-- <mt-popup v-model="associationpopupVisible" position="bottom">
        <ul> 
            <li v-for="(list, associationind) in UassociationList" :key="associationind" @click="JoinAssociationName(list.associationName,associationind)">{{list.associationName}}</li>
        </ul>
      </mt-popup> -->


		<!-- <div class="main-suspension"> 
			<div class="suspension-info">
					<div class="select-list"> 
		        		<a href="#">地区</a>
			        	<a href="#">行业</a>
			        	<a href="#">协会</a>
			        
		        	</div>
		        	<div class="el-circle-index-Introduction-list">
			          	<h4>热门企业</h4>
			              <ul> 
			              	<li v-for = "list in CompanyList.slice(0, 4)" @click="JumpCompanyInfo(list.id)" > 
			              		<img :src="list.log_img" v-if="list.log_img != null" :style="{ height: companyLiAvatarHeight + 'px' }">
		        <img src="../common/images/default_head.jpg" v-else />
			              		<p>{{list.name}}</p>
			              	</li>
			              	
			              </ul>
			          </div>
			</div>
		</div>
		<div class="main-content-empty"> 
		</div>
		<el-main class="main-circleList-list">
          <h4>所有企业</h4>
             <ul>
             	<li v-for = "list in CompanyList" @click="JumpCompanyInfo(list.id)" > 
             		<img :src="list.log_img" v-if="list.log_img != null" :style="{ height: companyLiAvatarHeight + 'px' }">
		        <img src="../common/images/default_head.jpg" v-else />
             		<div class="main-center">
	                   <h5>{{list.name}}</h5>
	                    <p>{{list.admin_name}}</p>
	                 </div>
              	</li>
               
             </ul>
    </el-main> -->
		<so-footer></so-footer>
	</div>
  
</template>

<script>
import headerSearch from '../public/header-search.vue';
import soFooter from '../components/footer-bar';
import InfiniteLoading from 'vue-infinite-loading';
import rearchKey from '../public/rearchKey';
  export default {
    data() {
      return {
        // path: 'http://fc.x.e000.com',
        headerTitle:'圈子企业',
        bottunTitle:'沟通',
        logining: false,
        cid:'',
        CompanyList:'',
        hot:'',
        num:10,
        search_intop: '',      //遮罩层样式
        searche: '',            //输入内容
        searchISshow: false,  
        clearShow: false,     //清除内容
        // items: [],
        userId:'',
        userStatus:1,//访问者状态 0 未登录状态 1
        page:0,
        userInfo:'',
        ptype: 0
        // 三级联动下拉框end
      };
    },

    mounted() {
        let that = this;
        that.cid = that.$route.query.paicheNo;
        that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        if(that.userInfo == null){//用户未登陆
            that.userStatus = 0;
            that.userId = 0;
        }else{
          that.userId = that.userInfo.uid;
        }
        console.log('圈子id',that.cid);
        if(that.cid == 0) {
          //获取所有企业列表
          that.getAllCompanyList();
        }else {
          //获取当前圈子的企业
          that.getUserEnterprise();
        }
    },
    watch: {
        searche(value) {
            if(value != '') {
              console.log('value',value)
              this.clearShow = true;
              this.search_intop = 'background-color: transparent; z-index: 0;';
            }else {
              this.clearShow = false;
              this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);';
            }
        }
    },
    components:{
     	headerSearch,
      soFooter,
      InfiniteLoading,
      rearchKey
    },
    methods: {
      // 获取 监听子组件input值的动向值
      spot(data) {
        this.searche = data;
        this.ptype = 1;
        this.onInfinite();
      },
      // 上拉加载
      onInfinite() {
          let that = this;
            console.log("触发")
            setTimeout(() => {       
                const temp = []; 
                // let page = that.page ;
                let keyword = that.searche;
                let userId = that.userId;
                let cid = that.cid;
                
                // console.log('key',page);
                if(that.cid == 0) {
                    //排序
                    let page = '';
                    if(that.ptype == 1){
                        this.CompanyList = [];
                        page = 0;
                    }else{
                        if(that.page == 0){
                            page = 1;
                        }else{
                            page = that.page;
                        }
                    }
                    that.$fetch(that.$path+'/api.php/Company/getAllCompanyList',{page,keyword,userId})
                      .then((res) => {
                        console.log('首页',res);
                      if(res.code == 200){
                        let array = res.data.list;
                        // array.reverse();
                        page++;
                        that.page = page;
                      //   if(that.num > array.length){
                      //     $state.complete();
                      //     return;
                      //   }
                      //   array.forEach(element => {
                      //     temp.push(element);
                      //   });
                      //   that.CompanyList = that.CompanyList.concat(temp);  
                      //   $state.loaded();  
                      // }else {
                      //     $state.complete();
                      //     return;
                      // } 
                      if(array == '') {
                          that.CompanyList = [];
                      }else {
                          array.forEach(element => {
                              temp.push(element);
                          });
                          that.CompanyList = that.CompanyList.concat(temp); 
                          // console.log('999',that.CompanyList);  
                          if(that.num > array.length){
                              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                              return;
                          }
                      }
                      
                      this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                      //  this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                      }else {
                          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                          return;
                      }  
                      that.ptype = 0;     
                  });  
                }else{
                  that.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid,page,keyword,userId})
                      .then((res) => {
                        console.log('首页',res);
                      if(res.code == 200){
                        let array = res.data.list;
                        // array.reverse();
                        page++;
                      //   if(that.num > array.length){
                      //     $state.complete();
                      //     return;
                      //   }
                      //   array.forEach(element => {
                      //     temp.push(element);
                      //   });
                      //   that.CompanyList = that.CompanyList.concat(temp);  
                      //   $state.loaded();  
                      // }else {
                      //     $state.complete();
                      //     return;
                      // }    
                      if(array == '') {
                          that.CompanyList = [];
                      }else {
                          array.forEach(element => {
                              temp.push(element);
                          });
                          that.CompanyList = that.CompanyList.concat(temp); 
                          // console.log('999',that.CompanyList);  
                          if(that.num > array.length){
                              this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                              return;
                          }
                      }
                      
                      // this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                      this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                      }else {
                          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                          return;
                      }  
                      that.ptype = 0;  
                  });  
                }
            }, 1000);
      },
      //获取圈子中的企业
      getUserEnterprise:function(){
      	let that = this;
        let cid = this.cid;
        let page = this.page ;
        let userId = that.userId;
        this.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid:cid,page,userId}).then((res) => {
          console.log('列表',res);
          that.CompanyList = res.data.list;
          that.hot = res.data.hot;
        })
      },
      //获取所有企业列表
      getAllCompanyList() {
        let that = this;
        let page = that.page;
        let keyword = that.searche;
        let userId = that.userId;
        console.log('用户id',userId);
        this.$fetch(this.$path+'/api.php/Company/getAllCompanyList',{page,keyword,userId}).then((res) => {
          this.CompanyList = res.data.list;
          this.hot = res.data.hot;
        })
      },
      pushIndex:function(){
        this.$router.push({path: "/"});
      },
      //点击企业名字跳转企业首页
      JumpCompanyInfo(id){
        if(this.$system != 'ios'){
          this.$router.push({path: '/userCenter/companyIndex', query: {cp_id: id}});
        }else{
          window.location.href = '/userCenter/companyIndex?cp_id=' + id;
        }       
      }, 
      //点击沟通跳转圈聊页面
      JumpcompanyInfomation(list) {
        let that = this;
        if(list.showStatus == 0){
          //加入
          if(that.userId == 0){
            //用户未登陆
            that.$router.push({path: '/login'}); 
          }else{//申请加入
            var companyName = list.name;
            var userId = that.userId;
            var userName = that.userInfo.username;
            var access_token = window.localStorage.getItem('access_token');
            var cp_id = list.id;
            that.$router.push({path:'/inCompanyTwo', query: {companyName, userId, userName, access_token,cp_id}});
          }
        }else if(list.showStatus == 2){
            that.$router.push({path: '/information', query: {cpId: list.id}}); 
        }else{
            //点击企业名字跳转企业首页
            if(this.$system != 'ios'){
              that.$router.push({path: '/userCenter/companyIndex', query: {cp_id: list.id}});
            }else{
              window.location.href = '/userCenter/companyIndex?cp_id=' + list.id;
            }   
        }
      	
      },
      //打开选择地区
      levelOneclick() {
        this.popupVisible = true;
      },
      JoinAreaName(name,listind) {
        this.area_name= name;
        this.popupVisible = false;
      },
      //打开选择行业
      levelTwoclick() {
        this.industrypopupVisible = true;
      },
      JoinIndustryName(industryName,industryind) {
        this.industry= industryName;
        this.industrypopupVisible = false;
      },
      //打开选择协会
      levelThreeclick() {
        this.associationpopupVisible = true;
      },
      JoinAssociationName(associationName,associationind) {
        this.association= associationName;
        this.associationpopupVisible = false;
      },
      // 点击搜索图标出现搜索框
      gotobtn() {
        this.searchISshow = true;
      },
      // 点击取消隐藏搜索框
      searchCancel(data) {
        this.searchISshow = false;
        data = '';
      },
      // 清除内容
      clearClick(data) {
        // this.clearShow = false;
        data = '';
      },
    },
    computed: {
        //过滤方法
      // CompanyList: function() {
      //   let that = this;
      //     var _search = that.searche;
      //     console.log()
      //     if (_search) {
      //         //不区分大小写处理
      //         var reg = new RegExp(_search, 'ig')
      //         //es6 filter过滤匹配，有则返回当前，无则返回所有
      //         return that.items.filter(function(e) {
      //             //匹配所有字段
      //             return Object.keys(e).some(function(key) {
      //                 let data = e.name + e.description;
      //                 return data.match(reg);
      //             })
      //             //匹配某个字段
      //             //  return e.name.match(reg);
      //         })
      //     };
      //     return that.items;
      // }
    },  
  }

</script>
<style>
@import '../common/css/userCenter.css';
.el-circle-index-Introduction-list{
    height: 180px;
    background: #fff;
    border-radius: 10px;
    padding: 15px 10px 0px 10px;
    
}

.el-circle-index-Introduction-list ul{
	margin:0;
	padding:0;
}
.el-circle-index-Introduction-list ul li{
	width:25%;
	float:left;
}
.el-circle-index-Introduction-list ul li img{
	    height: 60px;
    width: 60px;
}
.el-circle-index-Introduction-list h4{
	text-align:left;
	font-size:18px;
	color:#F00;
	margin: 15px 10px 25px 10px;
}
.el-circle-index-Introduction-list h4 a{
	color:#ccc;
	float:right;
	font-size:14px;
}
.el-circle-index-Introduction-list ul li p{
	    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-list a{
	width:30%;
	float:left;
	color:#FFF;
}
.main-circleList-list{
      padding: 20px 0 20px 0;
      background: #fff;
      margin-top:30px;
}
.main-circleList-list h4{
  margin: 0 0 20px 10px;
  padding: 0;
  text-align: left;
}
.main-circleList-list h4 a{
  float: right;
  color:#ccc;
  margin-right:10px;
  font-size: 14px;
}
.main-circleList-list h4 span{
  color:#f00;
  font-size:14px;
}
.el-icon-arrow-right{
      margin-top: 4px;
    margin-left: 5px; 
}
.main-circleList-list ul{
  width:100%;
  margin: 0;
  padding: 0;
}
.main-circleList-list ul li{
  width:100%;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-top:15px;
  border-bottom: #d8d8d8 solid 1px;
}
.main-circleList-list ul .active{
  border-bottom: none;
}
.main-circleList-list ul li img{
    width: 20%;
    float: left;
    margin: 5px;
}
.main-center{
      text-align: left;
    margin-left: 2%;
    float: left;
    width:55%;
}
.main-center h5{
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.main-center p{
  font-size: 16px;
}
.main-right {
  float: left;
    width: 20%;

}
.main-right .el-button {
      width: 60px;
    padding: 8px 10px;
    border-radius: 0;
    color: #fff;
}

/* 头部浮层-热门企业 */
.main_hot {
  height: 3.1rem !important;
}
.hot_top {
  margin-top: 0 !important;
}
.hot_top h3 {
  color: #e50838;
}
.main_hot .soc li {
  margin-right: 0.64rem !important;
}
.main_hot .soc li:last-child {
  margin-right: 0 !important;
}

/* 所有企业 */
.all_main_list {
  background-color: #fff;
  margin-top: 0.2rem;
}
/* 三级联动 */
.three_level_linkage {
  font-size: 0.3rem;
  color: #fff;
  font-weight: 400;
  background-color: #e50838;
  padding: 0.2rem 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.three_level_linkage .level_one {
  flex: 1;
  width: 33.3%;
  margin-left: -0.2rem;
  border-right: 1px solid #f8f8f8;
}
.three_level_linkage .level_one:last-child {
  border-right: none;
}


</style>
